<template>
	<!-- <page-meta :page-style="noSlide?'overflow: hidden;' : 'overflow: auto;'" style="display: block;"> -->
		<view class="layout">
			<view>
				<searchNavbar :parameter="parameter" :isMap="isMap" :openSysHeight="true" bs="indexList"
					@cityChange="cityChange"></searchNavbar>
				<!-- 导航栏 -->
				<view>
					<navTabFilter :categories="categories" :categoryList="categoryList"
						@changecategoryon="changecategoryon" :categoryon="categoryon" @toSearch="toSearch"
						@openFilter="noSlide = true" @closeFilter="noSlide = false" ref="ntf">
					</navTabFilter>
				</view>
				<view class="sort-box" style="margin-bottom: 20rpx;">
					<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
						<template v-for="(item,index) in sortList">
							<view :key="index" :class="['sort',sortOn==index?'sort-on':'']"
								@click="sortClick(index,item.status)">{{item.name}}</view>
						</template>
					</scroll-view>
				</view>
			</view>
			<view class="scroll">
				<scroll-view :scroll-top="scrollTopList" scroll-y="true" class="scroll-Y" 
					@scrolltolower="lower" >
					<!-- 列表 -->
					<!-- 全部 -->
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="list all" v-if="item.id">
							<shopArea :canClose="true" :list="[item]"></shopArea>	
						</view>
						<!-- 求租 -->
						<view class="list rent-ask" v-else>
							<seekItem :canClose="true" :list="[item]"></seekItem>
						</view>
					</view>
					<!-- 广告位 -->
					<!-- 		<view class="adver">
									<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
										indicator-active-color="#ddd">
										<swiper-item>
											<view class="swiper-item"></view>
										</swiper-item>
										<swiper-item>
											<view class="swiper-item"></view>
										</swiper-item>
									</swiper>
								</view> -->
					<!-- <view :style="'height:' + navH + 'rpx'"></view> -->
					<view class='loadingicon acea-row row-center row-middle'>
						<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
					</view>
				</scroll-view>
	<!-- 			<view class="uni-p-b-98">

				</view> -->

			</view>
		</view>



	<!-- </page-meta> -->
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import searchNavbar from '@/pages/others/components/searchNavbar/searchNavbar.vue'
	import navTabFilter from '../components/navTabFilter/navTabFilter.vue'
	import shopArea from '@/components/listItems/shopArea.vue'
	import seekItem from '@/pages/others/components/listItems/seekItem.vue'
	import zdyFilter from '@/pages/others/components/zdyFilter/index.vue'
	import {
		getInformationApi,
		getAllInfomation,
	} from '@/api/api.js'
	import {
		getAreaApi
	} from '@/api/service.js'
	import {
		getGroupListApi,
		BuyListApi,
		classificationList
	} from '@/api//subletOfShop.js'
	export default {
		components: {
			searchNavbar,
			navTabFilter,
			shopArea,
			seekItem,
			zdyFilter
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				parameter: {
					return: 1,
					placeholder: '商铺/写字楼/门面',
					categoryType: 1
				},
				isMap: true,
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				categoryList: [],
				noSlide: false,
				scrollTopList:0,
				sortList: [{
					name: '全部',
					status: -1
				}, {
					name: '出租',
					status: 0
				}, {
					name: '出售',
					status: 1
				}, {
					name: '转让',
					status: 2
				}, {
					name: '求租',
					status: 3
				}, {
					name: '求购',
					status: 4
				}],
				sortOn: 0,
				itemHeight: 88,
				itemPadding: 24,
				itemFontSize: 28,
				bgcolor: '#fff',
				activeColor: '#ee212d',
				itemTextColor: '#666',
				barTextColor: '#383838',
				// 区域
				currentAceaAsideIndex: 0,
				currentAceaConterIndex: 0,
				// 筛选
				currentFiltrateAsideIndex: 0,
				currentFiltrateConterIndex: 0,
				show: false,
				filtrateShow: false,
				// 筛选数组
				filtrateArr: [{
						type: '地铁',
						list: ['1号线', '2号线']
					},
					{
						type: '区域',
						list: ['岳麓区', '天心区', '开福区', '雨花区']
					}
				],
				filtrateConterArr: [
					['1号线', '2号线', '3号线', '4号线', '5号线', '6号线', '7号线', '2号线', '2号线'],
					['岳麓区', '天心区', '开福区', '雨花区', '雨花区', '雨花区', '雨花区', '雨花区雨花区雨花区雨花区雨花区雨花区雨花区', '雨花区', '雨花区']
				],
				categoryon: 0,
				categoryType: -1,
				dstatus: '',
				limit: 10,
				page: 1,
				list: [],
				loading: true,
				loadTitle: '',
				defaultSelected: [],
				filterData: [],
				search: {},
				categories: [{
						name: '区域',
						type: 'val',
						isMu:true,
						val:'value',
						attr: 'district',
						subCategories: []
					},{
						name: '面积',
						type: 'split',
						splitAttr: 'value',
						splitKey: 'areaRange',
						splitKeys: 'areaRanges',
						subCategories: [{
								name: '不限',
								value: ''
							}, {
								name: '20-50㎡',
								value: '20-50'
							},
							{
								name: '50-100㎡',
								value: '50-100'
							},
							{
								name: '100-150㎡',
								value: '100-150'
							},
							{
								name: '150-200㎡',
								value: '150-200'
							},
							{
								name: '200-300㎡',
								value: '200-300'
							},
							{
								name: '300-500㎡',
								value: '300-500'
							},
							{
								name: '500㎡以上',
								value: '500-1000'
							}
						]
					},
					{
						name: '价格',
						type: 'split',
						splitAttr: 'value',
						splitKey: 'rentRange',
						splitKeys: 'rentRanges',
						subCategories: [{
								name: '不限',
								value: ''
							},
							{
								name: '0-500',
								value: '0-500'
							},
							{
								name: '500-1000',
								value: '500-1000'
							},
							{
								name: '1000-1500',
								value: '1000-1500'
							},
							{
								name: '2000-2500',
								value: '2000-2500'
							},
							{
								name: '2500-3000',
								value: '2500-3000',
							},
							{
								name: '3000以上',
								value: '3000-100000'
							}
						]
					},
					{
						name: '适合业态',
						type: 'Array',
						val: 'id',
						attr: 'workingGroup',
						subCategories: []
					},

				]
			};
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 5
				}
			})
			this.getJy();
		},
		onLoad(options) {
			console.log("加载--- baiping"+options)
			this.categoryon = parseInt(options.index)
			this.categoryList = JSON.parse(options.m)
			this.categoryList.unshift({
				name: '推荐',
				type: ''
			})
			this.categoryList.push({
				name: '成交',
				type: 'cj'
			})
			if (options.type || options.type == 0) {
				this.sortOn = Number(options.type)
				this.dstatus = this.sortList[options.type].status > -1 ? this.sortList[options.type].status : ''
			}
			this.getDistict();
			this.categoryType = this.categoryList[this.categoryon].type;
		},
		watch: {
			categoryType(newVal) {
				this.$nextTick(() => {
					console.log("this.$refs",this.$refs)
					this.$refs.ntf&&this.$refs.ntf.reset();
					this.search={};
					this.page = 1;
					this.list = [];
					this.getList()
				})

			}
		},
		methods: {
			async getJy() {
				let {
					data
				} = await classificationList();
				console.log("data---",data)
				data.forEach(item=>{
					if(item.children){
						item.children.unshift({
							id:item.id,
							value:item.id,
							name: item.name+'(全部)'
						})
					}else{
						item.children = [{
							id:item.id,
							value:item.id,
							name: item.name
						}]
					}
				})
				this.categories[3].subCategories = data;
			},
			cityChange() {
				this.$refs.ntf.reset();
				this.search={};
				this.getDistict();
				this.page = 1;
				this.list = [];
				this.getList();
			},
			changecategoryon(e) {
				this.categoryon = e.index
				this.categoryType = e.type
			},
			toSearch(search) {
				this.search = search;
				this.page = 1;
				this.list= [];
				this.getList();
			},
			confirm(e) {
				console.log("choose", e)
			},
			openFilter(e) {
				console.log(e)
			},
			filterDropdownValue(value) {
				console.log(value)
			},
			filterClick() {
				this.show = !this.show;
				this.filtrateShow = true
			},
			filtrateConfirm() {
				// if (this.isNeedChangeTitle) {
				// 	this.updateArr.splice(this.currentIndex, 1, this.aceaConterArr[this.currentFiltrateAsideIndex][this.currentFiltrateConterIndex])
				// }
				this.show = false
				this.filtrateShow = false
			},
			filtrateReset() {
				this.show = false
				this.filtrateShow = false
			},
			longClick(index) {
				if (this.categoryList.length > 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryon = index;
				this.isLeft = index * this.isWidth //设置下划线位置
			},
			//点击
			sortClick(index, status) {
				this.sortOn = index;
				this.dstatus = status == -1 ? '' : status;
				this.page = 1;
				this.list = [];
				this.$refs.ntf.reset();
				this.search={};
				this.getList()
			},
			lower(){
				this.page++;
				this.getList();
			},
			//获取当前城市下的区域
			getDistict(){
				getAreaApi({
					city:this.$city
				}).then(res=>{
					console.log('cityList-->',res)
					let ind = this.categories.findIndex(item=>item.name == '区域')
					if(ind>-1){
						this.categories[ind].subCategories =res.data.map(item=>({...item,value:item.regionId,name:item.regionName}))
						console.log(this.categories[ind])
					}
				})
			},
			async getList() {
				this.loadTitle = ''
				this.loading = false;
				let res;
				console.log('this.categoryType', this.categoryType)
				let params = {
					limit: this.limit,
					page: this.page,
					storeCategory: (this.categoryType && this.categoryType != 'cj') ? this.categoryType : '',
					status: this.dstatus,
					isUp: '0,1',
					city: this.$city,
					...this.$location,
					...this.search
				}
				if (this.dstatus == 3 && this.categoryType !== '' && this.categoryType !== 'cj') {
					res = await getGroupListApi(params);
				} else if (this.dstatus == 4 && this.categoryType !== '' && this.categoryType !== 'cj') {
					res = await BuyListApi(params);
				} else if ([0, 1, 2].indexOf(this.dstatus) > -1 && this.categoryType !== '' && this.categoryType !==
					'cj') {
					res = await getInformationApi(params);
				} else {
					if (this.categoryType == 'cj') {
						params.categoryType = '';
						params.isUp = 2;
					}
					res = await getAllInfomation(params)
				}

				this.loading = true;
				if (this.page == 1) {
					this.list = res.data.list;
					if (this.list.length <= 0) {
						this.loadTitle = '暂无数据'
					}
				} else {
					this.list = this.list.concat(res.data.list);
					if (res.data.list.length <= 0) {
						this.loadTitle = '已加载所有'
					}
				}
			},
			// onReachBottom() {
			// 	this.page++;
			// 	this.getList();
			// }

		}
	}
</script>

<style lang="scss">
	.layout {
		display: flex;
		flex-direction: column;
		height: 100vh;
	.scroll-Y {
		height: 100%;
	}
		.scroll {
			overflow-y: auto;
			flex: 1;
		}
	}

	.sort-box {
		display: flex;
		width: 100%;
		padding: 0rpx 30rpx 18rpx;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			padding: 12rpx 36rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			margin-right: 18rpx;
		}

		.sort-on {
			color: #ffffff;
			background: rgba(238, 33, 45, 1);
		}
	}

	// 列表
	.list {
		padding: 0 32rpx 0;

		.item {
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			background: #ffffff;
			padding: 24rpx;
			overflow: hidden;

			.top-info {
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}
	}

	// 求租
	.all {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 216rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(238, 33, 45, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.tag-green {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: #43CF7C;
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 216rpx;

				.title {
					width: 100%;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.sell-price {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.transfer-price {
					margin-left: 18rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);

					text {
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag-tit {
						padding: 6rpx 0rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);
					}

					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						margin-bottom: 6rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		// 适合场所

		.suitable-box {
			margin-top: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(82, 104, 139, 1);

			// padding-bottom: 30rpx;
			// border-bottom: 1px solid rgba(238, 238, 238, 1);
			.suitable {
				display: inline-block;
				letter-spacing: 0.4rpx;
				padding: 10rpx;
				border-radius: 4rpx;
				background: rgba(248, 249, 253, 1);
				margin-left: 12rpx;
				white-space: nowrap;
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}

	// 出租
	.rent-ask {
		.title {
			width: 100%;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 56, 56, 1);
		}

		.goods-tag {
			margin-top: 18rpx;

			.tag {
				white-space: nowrap;
				border-radius: 4px;
				background: rgba(255, 232, 234, 1);
				padding: 6rpx 12rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.tag:last-child {
				margin-right: 0;
			}
		}

		.contact-info {
			width: 70%;

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.name {
				width: calc(100% - 100rpx);
				height: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				margin-left: 24rpx;
			}
		}

		.visit-l {
			width: 30%;

			.visit-num {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				margin-bottom: 12rpx;
			}

			.visit-btn {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 33, 45, 1);
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.distance {
			width: 100%;
			padding: 0 12rpx 12rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			image {
				width: 18rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		// 浏览咨询统计
		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar {
				width: 40%;
				height: 46rpx;
				position: relative;

				image {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					position: absolute;
				}
			}

			.visit-l {
				width: 60%;
				height: 46rpx;

				.visit-num {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}
			}

		}

	}

	// 广告位
	.adver {
		height: 122rpx;
		margin: 32rpx;
		border-radius: 10rpx;
		overflow: hidden;

		swiper,
		swiper-item {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			width: 100%;
			height: 100%;
			background-color: #ffc83c;
		}
	}
</style>